<template>
  <!-- 次级页面 包含toolbar -->
  <div class="sub-container">

    <div class="actionbar elevation-1">
      <div class="left" @click="onNavigate">
        <!-- <img src="../assets/icons/back.svg" alt=""> -->
        <i class="fa fa-angle-left"></i>
      </div>
      <div class="title">
        {{ title }}
      </div>
      <div class="right"></div>
    </div>
    <router-view />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
declare const $Vue: Vue;

@Component
export default class SubPage extends Vue {

  private title: string = 'Amazon';

protected mounted() {
  this.registerTitle();
}
  
  private onNavigate() {
    this.$router.go(-1);
  }

  private registerTitle() {
    const $this = this;
    $Vue.$on("title", (data: { message: string }) => {
      $this.title = data.message;
    });
  }
}
</script>


<style lang="less" scoped>
@import url(../styles/variables.less);
@tab-height: 48px;
@actionbar-height: 48px;

.sub-container {
  width: 100%;
  height: 100%;
  padding-top: @actionbar-height;
  .actionbar {
    height: @actionbar-height;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fcfcfc;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left, .right {
      align-items: center;
      justify-content: center;
      display: flex;
      width: 3rem;
      height: 100%;
      img {
        width: 1rem;
        height: 1rem;
      }
    }
    .title {
      font-size: 1.2rem;
    }
  }
  .home-router {
    width: 100%;
    height: 100%;
    padding-bottom: @tab-height;
  }
}
</style>

